import { memo } from 'react';
import { OrderType } from '../../../../types/order';
import OrderItemStyle from './style.ts';
import { RightOutlined } from '@ant-design/icons';
import { PRICE_ICON, product_arr } from '../../../../constant';
import { useNavigate } from 'react-router-dom';
import { Modal, Tag } from 'antd-mobile';
import dayjs from 'dayjs';

interface IProps {
  data: OrderType;
}

const OrderItem = memo((props: IProps) => {
  const { data } = props;
  const modalData = [
    { title: '所属机构', data: data.orgName },
    { title: '商品名称', data: data.productName },
    { title: '商品类型', data: product_arr.find(item =>
        item.key === data.productType)?.title ?? "暂无" },
    { title: '购买价格', data: PRICE_ICON + data.buyPrice },
    { title: '购买数量', data: data.buyNum },
    { title: '购买时间', data: dayjs(Number(data.buyTime)).format('YYYY-MM-DD HH:mm:ss') },
    { title: '付款手机号', data: data.tel },
    { title: '订单编号', data: data.orderCode },
  ];
  const nav = useNavigate();
  const orgClick = () => {
    nav(`/orgDetail/${data.orgId}`);
  };
  const contentClick = () => {
    Modal.show({
      title: '订单详情',
      getContainer: document.querySelector('#orderItemWrapper') as HTMLElement,
      bodyClassName: 'order_modal',
      content:
        modalData.map(item => (
          <div className="modal_item" key={item.title}>
            <span className="modal_item_title">{item.title + ':'}</span>
            <span className="modal_item_data">{item.data}</span>
          </div>
        ))
      ,
      showCloseButton: true,
      closeOnMaskClick: true,
      actions: [],
    });
  };
  return (
    <OrderItemStyle>
      <div id="orderItemWrapper">
        <div className="org" onClick={orgClick}>
          <div className="org_logo">
            <img src={data.orgLogo} alt="封面加载错误" />
          </div>
          <div className="org_name">{data.orgName}</div>
          <RightOutlined />
        </div>
        <div className="content" onClick={contentClick}>
          <div className="content_left">
            <img src={data.productLogo} alt="封面加载错误" />
          </div>
          <div className="content_middle">
            <div className="productName">{data.productName}</div>
            <Tag color="success" className="productType">{product_arr.find(item =>
              item.key === data.productType)?.title ?? "暂无" }</Tag>
          </div>
          <div className="content_right">
            <div className="right_price">{PRICE_ICON + data.buyPrice}</div>
            <div className="right_buyNum">{data.buyNum}×</div>
          </div>
        </div>
      </div>
    </OrderItemStyle>
  );
});

export default OrderItem;
